@import './variables.scss';

.sidebar-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: $sidebar-width;
  background-color: var(--menu-bg);
  box-shadow: $shadow-light;
  transition: all $animation-duration-base $animation-timing-function-ease;
  overflow: hidden;
  z-index: $z-index-sidebar;
  transform: translateX(0);
  will-change: width, transform;

  // 收起状态
  &.collapsed {
    width: $sidebar-collapsed-width;
    
    .logo {
      padding: 0;
      justify-content: center;
      
      .logo-text {
        opacity: 0;
        transform: translateX(-20px);
      }
    }
    
    .el-menu {
      border: none;
    }
    
    // 收起时隐藏子菜单
    .el-sub-menu {
      overflow: hidden;
      
      & > .el-sub-menu__title {
        padding: 0 !important;
        
        .el-sub-menu__icon-arrow {
          opacity: 0;
          transform: translateX(-10px);
        }
        
        & > span {
          opacity: 0;
          transform: translateX(-20px);
        }
      }
    }
    
    // 收起时的菜单项样式
    .el-menu-item {
      text-align: center;
      padding: 0 !important;
      
      .menu-icon {
        margin: 0;
        transform: scale(1.2);
      }
      
      span {
        opacity: 0;
        transform: translateX(-20px);
      }
    }
    
    // 弹出的子菜单
    .el-menu--popup {
      .el-menu-item {
        text-align: left;
        padding-left: $menu-indent-base !important;
        
        .menu-icon {
          margin-right: 8px;
          transform: scale(1);
        }
        
        span {
          opacity: 1;
          transform: translateX(0);
        }
      }
    }
  }
  
  // Logo 区域
  .logo {
    height: $header-height;
    padding: 0 $menu-indent-base;
    display: flex;
    align-items: center;
    transition: all $animation-duration-base $animation-timing-function-ease;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    
    img {
      height: 32px;
      width: 32px;
      margin-right: 12px;
      transition: all $animation-duration-base $animation-timing-function-bounce;
      
      &:hover {
        transform: scale(1.1);
      }
    }
    
    .logo-text {
      font-size: $font-size-large;
      font-weight: $font-weight-bold;
      color: var(--menu-text);
      white-space: nowrap;
      transition: all $animation-duration-base $animation-timing-function-ease;
    }
  }
  
  // 菜单样式
  .el-menu {
    border: none;
    height: calc(100% - #{$header-height});
    width: 100%;
    
    .menu-icon {
      font-size: $menu-icon-size;
      margin-right: 8px;
      width: $menu-icon-size;
      text-align: center;
      transition: all $animation-duration-base $animation-timing-function-ease;
    }
    
    .el-menu-item {
      height: $menu-item-height;
      line-height: $menu-item-height;
      padding: 0 $menu-indent-base !important;
      transition: all $animation-duration-base $animation-timing-function-ease;
      
      span {
        transition: all $animation-duration-base $animation-timing-function-ease;
      }
      
      &.is-active {
        background-color: var(--primary-light-9);
        color: var(--primary-color);
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 3px;
          height: 100%;
          background-color: var(--primary-color);
          transform: scaleY(0);
          transition: transform $animation-duration-base $animation-timing-function-spring;
        }
        
        &:hover::before {
          transform: scaleY(1);
        }
      }
      
      &:hover {
        background-color: var(--menu-hover-bg);
        
        .menu-icon {
          transform: scale(1.1);
        }
      }
    }
    
    .el-sub-menu {
      .el-sub-menu__title {
        height: $menu-item-height;
        line-height: $menu-item-height;
        padding: 0 $menu-indent-base !important;
        transition: all $animation-duration-base $animation-timing-function-ease;
      }
      
      .el-sub-menu__icon-arrow {
        font-size: $menu-arrow-size;
        transition: transform $animation-duration-base $animation-timing-function-spring;
      }
      
      &.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
        transform: rotateZ(180deg);
      }
      
      .el-menu-item {
        height: $menu-sub-item-height;
        line-height: $menu-sub-item-height;
        padding-left: $menu-indent-level2 !important;
        min-width: $sidebar-width;
      }
    }
  }
}

// 主区域适配
.main-container {
  margin-left: $sidebar-width;
  min-height: 100%;
  transition: margin-left $animation-duration-base $animation-timing-function-ease;
  position: relative;
  
  &.collapsed {
    margin-left: $sidebar-collapsed-width;
  }
}

// 移动端适配
@include respond-to(xs) {
  .sidebar-container {
    transform: translateX(-100%);
    transition: transform $animation-duration-base $animation-timing-function-ease;
    
    &.show {
      transform: translateX(0);
    }
    
    // 移动端手势支持
    touch-action: pan-y pinch-zoom;
    
    // 移动端阴影效果
    box-shadow: $shadow-dark;
  }
  
  .main-container {
    margin-left: 0;
    
    // 移动端侧边栏打开时的遮罩
    &::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: $z-index-modal-backdrop;
      opacity: 0;
      visibility: hidden;
      transition: all $animation-duration-base $animation-timing-function-ease;
      backdrop-filter: blur(4px);
    }
    
    &.sidebar-open {
      &::before {
        opacity: 1;
        visibility: visible;
      }
    }
  }
} 